<template>
  <div>
    <div class="top-panel">
      <el-form
        :model="searchFormData"
        label-width="80px"
        @submit.prevent
      >
        <el-row>
          <el-col :span="4">
            <el-form-item
              label="用户名"
              prop="nickNameFuzzy"
            >
              <el-input
                clearable
                placeholder="请输入用户名"
                v-model="searchFormData.nickNameFuzzy"
                @keyup.native="loadDataList"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item
              label="性别"
              prop="sex"
            >
              <el-select
                clearable
                placeholder="请选择性别"
                v-model="searchFormData.sex"
                :style="{ 'width': '100%' }"
              >
                <el-option
                  label="女"
                  :value="0"
                ></el-option>
                <el-option
                  label="男"
                  :value="1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item
              label="状态"
              prop="status"
            >
              <el-select
                clearable
                placeholder="请选择状态"
                v-model="searchFormData.status"
                :style="{ 'width': '100%' }"
              >
                <el-option
                  label="禁用"
                  :value="0"
                ></el-option>
                <el-option
                  label="正常"
                  :value="1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="5"
            :style="{ 'padding-left': '10px' }"
          >
            <el-button
              type="primary"
              @click="loadDataList"
            >搜索</el-button>

          </el-col>
        </el-row>

      </el-form>
    </div>
    <div class="data-list">
      <Table
        :columns="columns"
        :showPagination="true"
        :dataSorce="tableData"
        :fetch="loadDataList"
        :options="tableOptions"
      >
        <!-- 封面 -->
        <template #avatar="{ index, row }">
          <Avatar
            :userId="row.userId"
            :width="40"
          ></Avatar>
        </template>
        <!-- 名字 -->
        <template #nickName="{ index, row }">
          {{ row.nickName }}
          <span v-if="row.sex">{{ row.sex == 0 ? '女' : '男' }}</span>
        </template>
        <!-- 登录信息 -->
        <template #loginInfo="{ index, row }">
          <div>最后登录时间：{{ row.lastLoginTime }}</div>
          <div>最后登录IP：{{ row.lastLoginIp }}</div>
          <div>最后登录地点：{{ row.lastLoginIpAddress }}</div>
        </template>
        <!-- 积分 -->
        <template #integral="{ index, row }">
          <div>总积分：{{ row.totalIntegral }}</div>
          <div>当前积分：{{ row.currentIntegral }}</div>
        </template>
        <!-- 状态 -->
        <template #status="{ index, row }">
          <span
            v-if="row.status == 1"
            :style="{ color: 'green' }"
          >正常</span>
          <span
            v-else
            :style="{ color: 'red' }"
          >禁用</span>
        </template>
        <!-- 操作 -->
        <template #op="{ index, row }">
          <div
            v-if="row.status != -1"
            class="op"
          >
            <el-dropdown trigger="click">
              <span class="iconfont icon-more"></span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="updateUserStatus(row)">
                    {{ row.status == 1 ? '禁用' : '启用' }}
                  </el-dropdown-item>
                  <el-dropdown-item @click="sendMessage(row)">
                    发送系统消息
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </Table>
    </div>
    <!-- 发送消息 -->
    <SendMessage
      ref="sendMessageRef"
      @reload="loadDataList"
    ></SendMessage>
  </div>
</template>

<script setup>
import SendMessage from './SendMessage.vue';
import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
const { proxy } = getCurrentInstance();

const api = {
  loadDataList: '/user/loadUserList',
  updateUserStatus: '/user/updateUserStatus'
}

const columns = [
  {
    label: '头像',
    prop: 'avatar',
    width: 80,
    slotName: 'avatar'
  },
  {
    label: "昵称",
    prop: "nickName",
    width: 150,
    slotName: "nickName"
  },
  {
    label: "邮箱",
    prop: "email",
    width: 180
  },
  {
    label: "个人描述",
    prop: "personDescription"
  },
  {
    label: "加入时间",
    prop: "joinTime",
    width: 180
  },
  {
    label: "登录信息",
    prop: "lastLoginTime",
    width: 260,
    slotName: "loginInfo"
  },
  {
    label: "积分",
    prop: "totalIntegral",
    width: 150,
    slotName: "integral"
  },
  {
    label: "状态",
    prop: "status",
    slotName: "status",
    width: 60
  },
  {
    label: "操作",
    prop: "op",
    width: 80,
    slotName: "op"
  }
]

const searchFormData = ref({
  boardIds: [],
});
const tableData = ref({});
const tableOptions = {
  extHeight: 32,
}


const loadDataList = async () => {
  let params = {
    pageNo: tableData.value.pageNo || 1,
    pageSize: tableData.value.pageSize || 15
  }
  Object.assign(params, searchFormData.value)

  let result = await proxy.Request({
    url: api.loadDataList,
    params: params
  })
  if (!result) {
    return;
  }
  tableData.value = result.data
}

// 禁用用户
const updateUserStatus = (data) => {
  const title = data.status == 1 ? '禁用' : '启用'
  proxy.Confirm(`你确定要${title}用户${data.nickName}吗？`, async () => {
    let result = await proxy.Request({
      url: api.updateUserStatus,
      params: {
        userId: data.userId,
        status: data.status == 1 ? 0 : 1
      }
    })
    if (!result) {
      return;
    }
    if (data.status == 1) {
      proxy.Message.warning('禁用成功');
    } else if (data.status == 0) {
      proxy.Message.success('启用成功');
    }
    loadDataList();
  })
}

// 发送系统消息
const sendMessageRef = ref()
const sendMessage = (row) => {
  sendMessageRef.value.sendMessage(row);
  console.log(row);

}
</script>

<style lang="scss" scoped>
.op {
  cursor: pointer;
}
</style>
